ফ্রন্টএন্ড কোড স্প্লিটিং: রুট-ভিত্তিক এবং কম্পোনেন্ট-ভিত্তিক

// App.js
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
 return (
 
 Loading...

এই উদাহরণে, Home এবং About কম্পোনেন্টগুলি React.lazy() এবং ডাইনামিক ইম্পোর্ট ব্যবহার করে অলসভাবে লোড করা হয়। Suspense কম্পোনেন্ট একটি ফলব্যাক UI প্রদান করে যখন কম্পোনেন্টগুলি লোড হচ্ছে। React Router নেভিগেশন পরিচালনা করে এবং নিশ্চিত করে যে বর্তমান রুটের উপর ভিত্তি করে সঠিক কম্পোনেন্ট রেন্ডার করা হয়েছে।

উদাহরণ (Angular)

Angular-এ, রুট-ভিত্তিক কোড স্প্লিটিং লেজি-লোডেড মডিউল ব্যবহার করে করা হয়।

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
 { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
 { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে, রুট কনফিগারেশনে loadChildren প্রপার্টি সেই মডিউলের পথ নির্দিষ্ট করে যা অলসভাবে লোড করা উচিত। Angular-এর রাউটার স্বয়ংক্রিয়ভাবে মডিউল এবং তার সাথে সম্পর্কিত কম্পোনেন্টগুলি কেবল তখনই লোড করবে যখন ব্যবহারকারী সংশ্লিষ্ট রুটে নেভিগেট করবে।

উদাহরণ (Vue.js)

Vue.js রাউটার কনফিগারেশনে ডাইনামিক ইম্পোর্ট ব্যবহার করে রুট-ভিত্তিক কোড স্প্লিটিং সমর্থন করে।

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
 { path: '/', component: () => import('./components/Home.vue') },
 { path: '/about', component: () => import('./components/About.vue') }
];

const router = new VueRouter({
 routes
});

export default router;

রুট কনফিগারেশনে component অপশনটি কম্পোনেন্টকে অ্যাসিঙ্ক্রোনাসভাবে লোড করার জন্য একটি ডাইনামিক ইম্পোর্ট ব্যবহার করে। Vue Router রুট অ্যাক্সেস করা হলে কম্পোনেন্টের লোডিং এবং রেন্ডারিং পরিচালনা করবে।

রুট-ভিত্তিক কোড স্প্লিটিংয়ের সুবিধা

• বাস্তবায়ন করা সহজ: রুট-ভিত্তিক কোড স্প্লিটিং বাস্তবায়ন করা তুলনামূলকভাবে সহজ, বিশেষ করে আধুনিক ফ্রেমওয়ার্কগুলির দ্বারা প্রদত্ত সমর্থনের সাথে।
• উদ্বেগের স্পষ্ট বিচ্ছেদ: প্রতিটি রুট অ্যাপ্লিকেশনের একটি স্বতন্ত্র অংশ উপস্থাপন করে, যা কোড এবং এর নির্ভরতা সম্পর্কে যুক্তি করা সহজ করে তোলে।
• বড় অ্যাপ্লিকেশনগুলির জন্য কার্যকর: রুট-ভিত্তিক কোড স্প্লিটিং বিশেষত অনেক রুট এবং বৈশিষ্ট্য সহ বড় অ্যাপ্লিকেশনগুলির জন্য উপকারী।

রুট-ভিত্তিক কোড স্প্লিটিংয়ের অসুবিধা

• পর্যাপ্ত গ্রানুলার নাও হতে পারে: রুট-ভিত্তিক কোড স্প্লিটিং এমন অ্যাপ্লিকেশনগুলির জন্য যথেষ্ট নাও হতে পারে যেগুলিতে জটিল কম্পোনেন্ট রয়েছে যা একাধিক রুটে শেয়ার করা হয়।
• প্রাথমিক লোডের সময় এখনও বেশি হতে পারে: যদি একটি রুটে অনেক নির্ভরতা থাকে, তবে সেই রুটের জন্য প্রাথমিক লোডের সময় এখনও উল্লেখযোগ্য হতে পারে।

কম্পোনেন্ট-ভিত্তিক কোড স্প্লিটিং

কম্পোনেন্ট-ভিত্তিক কোড স্প্লিটিং কোড স্প্লিটিংকে আরও এক ধাপ এগিয়ে নিয়ে যায় অ্যাপ্লিকেশন কোডকে স্বতন্ত্র কম্পোনেন্টের উপর ভিত্তি করে ছোট ছোট খণ্ডে বিভক্ত করে। এই পদ্ধতিটি কোড লোড করার উপর আরও সূক্ষ্ম নিয়ন্ত্রণ দেয় এবং জটিল UI এবং পুনঃব্যবহারযোগ্য কম্পোনেন্ট সহ অ্যাপ্লিকেশনগুলির জন্য বিশেষভাবে কার্যকর হতে পারে।

বাস্তবায়ন

কম্পোনেন্ট-ভিত্তিক কোড স্প্লিটিংও ডাইনামিক ইম্পোর্টের উপর নির্ভর করে, কিন্তু পুরো রুট লোড করার পরিবর্তে, স্বতন্ত্র কম্পোনেন্টগুলি চাহিদা অনুযায়ী লোড করা হয়। এটি নিম্নলিখিত কৌশলগুলি ব্যবহার করে অর্জন করা যেতে পারে:

1. অলসভাবে কম্পোনেন্ট লোড করা: ডাইনামিক ইম্পোর্ট ব্যবহার করে কম্পোনেন্টগুলি কেবল তখনই লোড করুন যখন তাদের প্রয়োজন হয়, যেমন যখন সেগুলি প্রথমবার রেন্ডার করা হয় বা যখন একটি নির্দিষ্ট ঘটনা ঘটে।
2. শর্তসাপেক্ষ রেন্ডারিং: ব্যবহারকারীর মিথস্ক্রিয়া বা অন্যান্য কারণের উপর ভিত্তি করে শর্তসাপেক্ষে কম্পোনেন্ট রেন্ডার করুন, শর্ত পূরণ হলেই কম্পোনেন্ট কোড লোড করুন।
3. Intersection Observer API: Intersection Observer API ব্যবহার করে সনাক্ত করুন কখন একটি কম্পোনেন্ট ভিউপোর্টে দৃশ্যমান হয় এবং সেই অনুযায়ী তার কোড লোড করুন। এটি বিশেষত সেই কম্পোনেন্টগুলি লোড করার জন্য দরকারী যা প্রাথমিকভাবে অফ-স্ক্রিন থাকে।

উদাহরণ (React)

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
 return (
 

 Loading...
}>